<template>
  <div>
    <div class="outer">
      <div class="title">个人页面</div>
      <div class="HeadPortrait" @click="imgChange">
        <img :src='imgSrc'>
        <!--        <van-uploader :after-read="afterRead" />-->
      </div>
      <input style="display: none" type="file" @change="uploadImg" ref="img">
      <ul>
        <!--        <router-link tag="li" to="/Registered">注册</router-link>-->
        <!--        <router-link tag="li" to="/MyLogin">登录</router-link>-->
        <router-link tag="li" to="/PersonalInformation">个人信息</router-link>
        <router-link tag="li" to="/EditData">修改个人信息</router-link>
        <!--        <router-link tag="li" to="/Setting">设置</router-link>-->
        <li @click="out">退出登录</li>
      </ul>
    </div>


  </div>
</template>

<script>

import {mapState} from "vuex";
import {changeImg, getLogOut, getPersonalInformation} from "@/api/login-aip";
import {Notify} from "vant";


export default {
  name: "MyPage",
  data() {
    return {
      imgSrc: '../../../public/images/默认头像.jpg',
    }
  },
  computed: {
    ...mapState(["isLogin", "userInfo", "Active"])
  },
  created() {
    this.$store.commit("changeActive", {Active: 3})
    localStorage.setItem("Active", JSON.stringify(3))
    // console.log(this.Active)
    //  查看个人信息，判断是否登录
    getPersonalInformation().then(res => {
      // console.log(res.data)
      if (res.code !== 0) {
        this.$router.push('/NotLogged')
      } else {
        this.imgSrc = res.data.avatar
      }
    })
  },
  methods: {

    imgChange() {
      this.$refs.img.click()

    },
    uploadImg(e) {
      changeImg(e.target.files[0]).then(() => {

        getPersonalInformation().then(res => {
          // console.log(res)
          if (res.code === 0) {
            this.imgSrc = res.data.avatar
            Notify({
              message: '更换头像成功',
              color: '#666',
              background: '#c8f1e1',
            });
          }
        })
      })
    },
    out() {
      getLogOut().then(res => {
        console.log(res)
        this.$router.push('/NotLogged')
      })
    }
  },
  components: {
    [Notify.Component.name]: Notify.Component,
  }
}
</script>

<style scoped lang="less">
.outer {
  width: 100%;
  height: 650px;
  background: #fafafa;

  .title {
    height: 50px;
    width: 100%;
    line-height: 50px;
    background-color: white;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }

  .HeadPortrait {
    width: 80px;
    height: 80px;
    //background-color: red;
    border-radius: 50%;
    margin: 20px auto;
    overflow: hidden;

    img {
      width: 80px;
      height: 80px;
    }
  }

  ul {
    margin-top: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    li {
      padding: 20px;
      border-top: 1px solid #f1f1f1;
    }
  }
}

ul {
  list-style: none;
}
</style>